<template>
	<div id="app">
		<!-- 视频做登录背景的测试 -->
		<!-- <video id="bcVideo" src="../../static/experience.mp4" autoplay  loop controls="no"></video> -->
		<div id="login_area" ref="login" v-loading.fullscreen="loading" element-loading-text="正在获取平台配置,请稍等..."
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<div class="sysNameText" v-show="!loading">{{ siteName }}</div>
			<div class="formC"
				:class="formPosition == 'center' ? 'pcCenter' : formPosition == 'rightTop' ? 'rightTop' : 'rightCenter'"
				v-show="!loading">
				<!-- <div id="svgBar"></div> -->
				<div class="bar"></div>
				<el-form id="submitForm">
					<div id="login_tip">
						<span id="acount" class="acount">账号登录</span>
						<!-- <span id="acount"  :class="box=='acount'?'active':''">账号登录</span> -->
						<!-- <span style="margin:0 0.2rem;"> | </span> -->
						<!-- <span id="tele" :class="box=='tele'?'active':''">手机验证码登录</span> -->
						<!-- 左侧小三角 -->
						<span class="triangle triRight"></span>
						<!-- 右侧小三角 -->
						<span class="triangle triLeft"></span>
					</div>
					<div class="allinpu" v-if="box == 'acount'">
						<el-form-item class="item">
							<!-- <span style="color:green;font-size:20px;">用&nbsp;户&nbsp;名：</span> -->
							<input v-model.trim="form.name" type="text" class="inpu" name="user" autocomplete="on"
								style="background-color:none;" placeholder="请输入用户名" id="name" />
							<!-- 下面的写法可以防止浏览器自动填入，即默认清除输入框-->
							<!-- <input v-model.trim="form.name" type="text" autocomplete="new-password" class="inpu" name="user" style="background-color:none;"
							 placeholder="请输入用户名" id="name" @blur="changeName" /> -->
						</el-form-item>
						<el-form-item class="item">
							<!-- <span style="color:green;font-size:20px;">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span> -->
							<input v-model.trim="form.pwd" type="password" name="pwd" class="inpu" autocomplete="on"
								style="background-color:none;" placeholder="请输入密码" id="pwd" />
						</el-form-item>
						<!-- <el-form-item class="item" style="position: relative;">
						 <input v-model="form.exam" type="text" autocomplete="off" class="inpu" name="exam"
								placeholder="请输入验证码" id="exam" />
							<div class="exnum" @click="changeExam"><i id="one">{{ exone }}</i> <s id="two">{{ extwo
									}}</s>
								<span id="three">{{ exthr }}</span>
								<u id="four">{{ exfou }}</u>
							</div>
						</el-form-item> -->
						<!-- <div class="rember" style="position: relative;z-index:1000;color:#111;"> -->
						<!-- <div class="remberpwd" style="float:left;min-width:38%;" @click="testLogin">
								<div class="minbox">
									<span id="right" v-if="isTest" style="color:#F2B910;">√</span>
								</div>
								<span style="line-height:0.4rem;margin-left:-0.1rem;">测试账号登录</span>
							</div> -->
						<!-- <div class="remberpwd" style="float:left;width:32%;" @click="remberPwd(remb)">
								<div class="minbox">
									<span v-if="remb" id="right" style="color:#F2B910;">√</span>
								</div>
								<span style="line-height:0.4rem;margin-left:-0.1rem;">记住密码</span>
							</div> -->
						<!-- <div class="remberpwd" style="float:left;text-align: left;"  @click="testLogin">
								<span style="line-height:0.4rem;">测试账号登录</span>
							</div> -->
						<!-- <span style="float:left;line-height:0.4rem;color:#fff;" @click="findBack">找回密码</span> -->
						<!-- </div> -->
					</div>
					<!-- <div class="allinpu_2" v-else>
						<el-form-item class="item">

							<input v-model.trim="form.tele" type="text" autocomplete="new-password" class="inpu" name="user" style="background-color:none;"
							 placeholder="请输入手机号" id="telephone"/>
						</el-form-item>
						<el-form-item class="item">

							<input v-model="form.smsExam" type="text" autocomplete="new-password" class="inpu" name="exam" placeholder="请输入短信验证码" id="exam" required/>
						    <div class="sendbox">
						    	<div v-if="sendnum" class="sendnum">
						    		<el-button class="send" :class="!form.tele?'noable':'able'" :disabled="!form.tele" v-if="send" @click="sendExam">发送验证码</el-button>
						    		<span class="send able" style="width:2.2rem;font-size: 14px;" v-else>{{timer}}秒后重新发送</span>
						    	</div>
						    	<span class="send able" v-else  @click="reSendExam">重新发送</span>
						    </div>
						</el-form-item>
					</div> -->
					<div style="margin:0 auto;width:6rem;margin-top:-0.1rem;">
						<el-button v-if="box == 'acount'"
							:class="form.name && form.pwd? 'tive' : 'logbtn'"
							:disabled="!(form.name && form.pwd && login)" type="success"
							@click="loginGo">登&nbsp;&nbsp;录</el-button>
						<!-- <el-button v-else :class="(form.tele && form.smsExam)?'tive':'logbtn'"  :disabled="!(form.tele && form.smsExam)" type="success" style="width:100%;"  @click="examLoginGo">登&nbsp;&nbsp;录</el-button> -->
						<!-- <el-button v-if="box=='acount'":class="form.name || form.pwd || form.exam?'reset':'logbtn'" :disabled="!(form.name || form.pwd || form.exam)" type="primary" @click="reset">重&nbsp;&nbsp;置</el-button> -->
					</div>
				</el-form>

			</div>
			<!-- <div class="beian">
				ICP备案号:<a href="http://beian.miit.gov.cn" target="_blank">陕ICP备1700561号-4</a><a href="##">平台使用说明书(点击下载)</a><a style="display: inline-block;">平台适配及兼容问题说明</a>
			</div> -->
		</div>
		<!-- <el-dialog :visible="dialogFormVisible"  width="20%" append-to-body top="300px" class="dial" :show-close="close">
		  <div class="toptit">
		    <span>扫码进入用户手机端</span>
		    <span style="float:right;cursor: pointer;" @click="dialogFormVisible=false">关闭</span>
		  </div>
		  <img src="https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/iotScan.png" class="scan"/>
		</el-dialog> -->
		<el-dialog :visible="dialogVisible" :width="win.screen.width > 1600 ? '50%' : '90%'" append-to-body
			:top="win.screen.width > 1600 ? '160px' : '80px'" class="dial" :show-close="close">
			<div class="toptit">
				<span>平台适配说明</span>
				<span style="float:right;cursor: pointer;" @click="dialogVisible = false">关闭</span>
			</div>
			<div class="infocontent">
				<h2 style="width:100%;text-align: center;margin-top:0.1rem;">关于平台浏览器和分辨率的的适配说明</h2>
				<!-- <h3>一．电脑端</h3> -->
				<!-- <p>地址：http://xajd.ykiot.net<br> -->
				<br>
				适配浏览器：最佳浏览器为谷歌(Chrome);其次：360极速模式，火狐(Firefox)，Microsoft Edge;<br>
				<span style="color:red;">注：请勿在聊天工具(如微信,QQ等)中直接点击地址访问,必须使用上述专业浏览器访问;</span><br>
				适配分辨率：最佳分辨率为1920*1080,向上适配2560*1440，向下主要适配：1440*900，1366(1360)*768，1600*900;<br>
				适配比例：电脑显示器100%，浏览器100%(可根据情况微调，快捷键：ctrl+"-"或"+");<br>
				横竖屏：电脑端只支持横屏显示;<br>
				特殊情况说明：<br>
				1.如果是访问之后改变的分辨率或显示比例，需要刷新页面(快捷键：ctrl+F5)。<br>
				2.在360极速模式最佳分辨率下会出现错位的情况，这时请检查浏览器顶部和左右是否有多余菜单和弹出的提示信息，如有，关闭即可。(360关闭左侧菜单或底部任务栏的方法：点击右上方“菜单”(三横线)——点击“设置”——点击“界面设置”，去掉对应选项前的√即可)。<br>
				3.在适配的浏览器和适配的分辨率下，依然出现错位的情况，这时请检查系统显示屏和浏览器的显示比例是否是100%.<br>
				4.一般情况下，浏览器使用时请保留顶部标签栏，地址栏，收藏栏即可，其他栏将会影响到显示适配。<br>
				5.如果浏览器弹出是否允许位置定位的对话框，请点击“允许”，因为平台要用到地理定位。<br>
				6.在视频监控时，如果浏览器弹出需要安装Adobe flash Player的对话框，请正常安装。</p>
				附：浏览器官方下载地址(点击访问):
				<a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank" style="color:deepskyblue">谷歌浏览器</a>
				<a href="https://www.microsoft.com/zh-cn/edge" target="_blank"
					style="color:deepskyblue;margin-left:0.4rem;">微软Edge浏览器</a>
				<a href="https://browser.360.cn" target="_blank"
					style="color:deepskyblue;margin-left:0.4rem;">360浏览器</a>
				<a href="http://www.firefox.com.cn" target="_blank"
					style="color:deepskyblue;margin-left:0.4rem;">火狐浏览器</a><br>
				注：360浏览器下载安装后请使用极速模式并关闭无用菜单
				<!-- <h3>二．手机端</h3>
			 <p>地址：https://m.ykiot.net;<br>
			 适配浏览器：最佳浏览器为微信(含企业微信)内嵌浏览器(考虑到方便性，在微信对话信息中直接点击地址即可访问，也可在微信公众号中绑定后访问）；其次，其他主流手机浏览器;<br>
			 适配分辨率：最佳分辨率375*667（如手机华为HONOR X10，iphone6/7/8）,其次，主流智能手机均可适配;<br>
			 横竖屏：手机端只支持竖屏显示;<br>
			 特殊情况说明：<br>
			 1.对于过小(如320px,对应手机如iphone4)或过大屏幕的手机，可在“我的”中的字体调整，调整文字指数大小以适配。<br>
			 2.对于纯触屏手机，部分手机底部有导航条的手机可能会有一点影响，可在手机设置中关闭底部导航条(或结合第一条调整)。<br>
			 3.对于在手机浏览器中打开时，部分浏览器底部自带的导航条可能会有一点影响，可在浏览器设置中关闭导航条(或结合第一条调整)。<br>
			 4.如果采用手机UC浏览器打开，可能会出现文字颜色不正常的情况，可在其设置中改变文字颜色，设为常规颜色即可(因为这里的文字颜色会覆盖代码中文字原有的颜色设置)。</p> -->
			</div>
		</el-dialog>
		<div class="middleBottom" v-show="!loading">
			<!-- <div>简单易用，功能全面，快速搭建物联网应用平台，支持组态，数据转发，视频监控，远程配置等!</div> -->
			<!-- <div>实时数据，历史数据，云组态，设备联动，设备划拔，视频监控等功能全面的物联网设备监控系统！</div> -->
			<!-- <span @click="register">用户注册</span> -->
			<!-- <span @click="dialogFormVisible = true">手机端登录</span> -->
			<span @click="showInfo">平台适配说明</span>
		</div>
		<!-- <div class="scanBottom">
			<div class="mobileWeb">
				<img :src="baseurl+'static/images/wechatOfficial.jpg'" class="scan"/>
				<div class="scanText">微信公众号</div>
			</div>
			<div class="wxProgam">
				<img :src="baseurl+'static/images/miniprogram.png'" class="scan"/>
				<div class="scanText">微信小程序</div>
			</div>
		</div> -->
	</div>
</template>

<script>
//import addressConfig from
export default {
	name: 'Login',
	data() {
		return {
			loading: false,
			siteName: '',
			forexam: '',
			//logo:"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/ykwdlogo.png",
			remb: false,
			box: "acount",
			baseurl: this.$baseurl,
			win: window,
			pressEnter: false,
			login: true,
			close: false,
			timer: 60,
			dialogVisible: false,
			//dialogFormVisible: false,
			formPosition: 'center',
			form: {
				name: '',
				tele: '',
				pwd: '',
				//exam: '',
				smsExam: ''
			}
			// findform: {
			// 	name: '',
			// 	tele: '',
			// 	teleExm: '',
			// 	newPwd: ''
			// }

		}
	},
	computed: {
		// exone: function () {
		// 	return this.forexam.substr(0, 1)

		// },
		// extwo: function () {
		// 	return this.forexam.substr(1, 1)

		// },
		// exthr: function () {
		// 	return this.forexam.substr(2, 1)

		// },
		// exfou: function () {
		// 	return this.forexam.substr(3, 1)
		// }
	},
	methods: {
		getPlatformConfig() {
			this.$http({
				method: 'post',
				url: 'api/sys/info',
				data: {}
			}).then(res => {
				if (res && (res.data.result == "success")) {
					console.log(res.data.data);
					//登录框位置获取
					this.formPosition = res.data.data.pc_position;
					//console.log(this.formPosition);
					console.log(this.$baseurl);
					//设置登录背景图,使用this.baseurl有时候获取不到
					this.$refs.login.style.backgroundImage = "url(" + this.$baseurl + res.data.data.pc_bg + ")";
					//设置左上角名称
					this.siteName = res.data.data.pc_title;
					//设置网页标签栏名称
					document.title = res.data.data.pc_title;
					//设置网页标签栏logo
					let linkLogo = document.getElementById('siteIcon');
					linkLogo.href = this.$baseurl + res.data.data.site_logo;
          localStorage.setItem("loginLogo",res.data.data.site_logo);
					this.loading = false;
				}
			}).catch(error => {
				console.log(error);

			});
		},
		// changeBox(event){
		//   if (event.target.id=="acount" || event.target.id=="tele") {
		// 	  this.box=event.target.id;
		// 	  if(this.box=="tele"){
		// 		  this.form.pwd="";
		// 		  this.form.smsExam="";
		// 	  }
		//   } else {
		// 	  this.box="acount";
		//   }
		// },

		loginGo() {
			var that = this;
			this.login = false;
			setTimeout(function () {
				that.login = true;
			}, 2000)
			this.$http({
				method: 'post',
				url: 'api/user/login',
				data: {
					"user_name": that.form.name,
					"user_pass": that.form.pwd
				}
			}).then(res => {
				if (res && (res.data.result == "success")) {
					localStorage.setItem("attoken", res.data.data.accessToken);
					localStorage.setItem("at_retoken", res.data.data.refreshToken);
					localStorage.setItem("at_userId", res.data.data.id);
					localStorage.setItem("atuser", res.data.data.user_name);
					localStorage.setItem("atuser_type", res.data.data.user_type);
					// localStorage.setItem("grade", res.data.data.user.grade);
					localStorage.setItem("site_name", res.data.data.site_name);
					localStorage.setItem("site_auth", res.data.data.site_auth);
					localStorage.setItem("monitorMode", res.data.data.monitor_mode);
					localStorage.setItem("monitorMenu", JSON.stringify(res.data.data.monitor_menu));
					// localStorage.setItem("isDeveloper", res.data.data.user.is_developer);
					// localStorage.setItem("allowFinance", res.data.data.user.allow_finance);
					// localStorage.setItem("productShow", res.data.data.user.products_view);
					//用以判断是否为第一次，以显示登录提示；
					localStorage.setItem("isFirst", true);
					this.$message({
						message: '恭喜你，登录成功！',
						type: 'success',
						duration: 1000,
						center: true
					});
					setTimeout(function () {
						//if(res.data.data.user_type==1){
						that.$router.push({
							path: '/mainMenu',
							name: 'mainMenu',
							component: 'mainMenu'
						})
						//  }else{
						// 	that.$router.push({
						// 		path: '/showData',
						// 		name: 'showData',
						// 		component: 'showData'
						// 	})
						// }
						window.onkeydown = null;
					}, 500);
					// setTimeout(function(){
					// 	that.toIndexPage(res.data.data.user.index_page,res.data.data.user.grade);
					// },500)

				}
    //     else if ((that.form.exam.toLowerCase() != that.forexam.toLowerCase()) && (res.data.result == "success")) {
				// 	this.$message({
				// 		message: '验证码错误，请重新输入！',
				// 		type: 'error',
				// 		center: true
				// 	});
    //       if(this.pressEnter){
    //          this.pressEnter = false;
    //       }
				// 	return false
				// }
        else {
           if(this.pressEnter){
              this.pressEnter = false;
           }
        }
			}).catch(error => {
        if(this.pressEnter){
           this.pressEnter = false;
        }
				console.log(error);

			});
		},

		//根据首页选项跳转函数
		toIndexPage(index, grade) {
			let newIndex = Number(index);
			switch (newIndex) {
				case 1:
					this.$router.push({
						path: '/mainMenu',
						name: 'mainMenu',
						component: 'mainMenu'
					})
					break;
				case 2:
					if (Number(grade) < 3) {
						this.$router.push({
							path: '/showData',
							name: 'showData',
							component: 'showData'
						})
					} else {
						localStorage.setItem("bgcolor", "#061E26");
						this.$router.push({
							path: '/showDataThree',
							name: 'showDataThree',
							component: 'showDataThree'
						})
					}
					localStorage.setItem('indexPath', 2);
					break;
				case 3:
					this.$router.push({
						path: '/showTotal',
						name: 'showTotal',
						component: 'showTotal'
					});
					localStorage.setItem('indexPath', 3);
					break;
				default:
					this.$router.push({
						path: '/mainMenu',
						name: 'mainMenu',
						component: 'mainMenu'
					})
			}
		},


		showInfo() {
			this.dialogVisible = true;
		},

		reset() {
			this.form.name = '';
			this.form.tele = '';
			this.form.pwd = '';
			//this.form.exam = '';
			this.form.smsExam = '';
			//this.forexam = this.random_string()
		},
		// 随机生成验证码
		random_string() {
			// len = len || 32;　　
			var chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz123456789';
			var maxPos = chars.length;
			var exm = '';
			for (let i = 0; i < 4; i++) {
				exm += chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return exm;
		},
		randomColor(col) {
			col = col || 6;
			var chars = '0123456789abcde';
			var maxPos = chars.length;
			var color = '';
			for (let i = 0; i < col; i++) {
				color += chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return color;
		},

		changeExam() {
			this.forexam = this.random_string();
			this.randomExam();
		},

		randomExam() {
			var one = document.getElementById("one");
			var two = document.getElementById("two");
			var three = document.getElementById("three");
			var four = document.getElementById("four");
			one.style.color = "#" + this.randomColor(6)
			two.style.color = "#" + this.randomColor(6)
			three.style.color = "#" + this.randomColor(6)
			four.style.color = "#" + this.randomColor(6)
		},

		//测试是否在微信中打开，并提示
		is_weixn() {
			var ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf("micromessenger") != -1) {
				return true;
			} else {
				return false;
			}
		},

		//检测屏幕显示比例是否为100%;
		detectZoomAndWeiXin() {
			var ratio = 0;
			var screen = window.screen;
			var ua = navigator.userAgent.toLowerCase();
			if (/(Android|iPhone|iPad|iPod)/i.test(ua)) {
				//判断是移动端（主要针对ipad）的话，则不做比例检测
				return false;
			}
			if (window.devicePixelRatio !== undefined) {
				ratio = window.devicePixelRatio;
			} else if (ua.indexOf('msie')) {
				if (screen.deviceXDPI && screen.logicalXDPI) {
					ratio = screen.deviceXDPI / screen.logicalXDPI;
				}
			} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
				ratio = window.outerWidth / window.innerWidth;
			}
			if (ratio) {
				ratio = Math.round(ratio * 100);
			}
			//this.isFit=ratio==100?true:false;
			if (ratio != 100 && !this.is_weixn()) {
				this.$notify({
					title: '',
					dangerouslyUseHTMLString: true,
					duration: 8000, //默认4500ms
					message: `<p style='color:red;font-size:18px;line-height:28px;'>重要提示：</br>　　检测到您的电脑显示器或浏览器显示比例不是100%，可能会影响到显示效果，建议将显示比例设为100%后刷新，详情请查看平台适配说明!</p>`,
					position: 'bottom-left'
				});
			} else if (this.is_weixn()) {
				this.$notify({
					title: '',
					dangerouslyUseHTMLString: true,
					duration: 8000, //默认4500ms
					message: `<p style='color:red;font-size:18px;line-height:28px;'>重要提示2：</br>　　检测到您不是在浏览器中访问，为了正常使用，请用专业浏览器访问，勿在微信或QQ聊天软件中直接打开，详情请查看平台适配说明!</p>`,
					position: 'bottom-left'
				});
			}
		}
	},

	created() {
		var that = this;
		this.baseurl = this.$baseurl;
		//console.log(this.$baseurl);
		//console.log(this.baseurl);
		//this.$baseurl
		if (this.allAlarmSocket) {
			this.allAlarmSocket.close();
			clearInterval(that.allAlarmTimer);
		}
		//this.getSvgData('../../static/switchGreen.svg');
		localStorage.clear();
		//默认静音，不开启语音报警；
		localStorage.setItem("muted", false);
		localStorage.setItem('indexPath', '2');
		localStorage.setItem("bgcolor", "#061E26"); //默认色#222831
		//localStorage.setItem("alarmVoice",true);
		this.$message.closeAll();
		this.$notify.closeAll();
		//缓存自动登录，不安全，停用
		// if(localStorage.getItem('ykuser')){
		//   this.$router.push({
		//    	path: '/mainMenu',
		//    	name: 'mainMenu',
		//   	component: 'mainMenu'
		//   })
		// }
	},

	mounted() {
		var that = this;
		this.detectZoomAndWeiXin();
		//setTimeout(function () {
			this.getPlatformConfig();
		//}, 500)
		window.onresize = null;
		//console.log(window.screen.width,window.screen.height);
		var box = document.getElementById("login_area");
		box.style.height = window.innerHeight + 'px';

		//document.getElementById("bcVideo").style.height = window.innerHeight + 'px';
		//document.getElementById("bcVideo").style.width = window.innerWidth + 'px';

		window.onresize = function () {
			that.detectZoomAndWeiXin();
			box.style.height = window.innerHeight + 'px';
		}
		this.reset();
		//this.randomExam();
	},

	updated() {
		var that = this
		window.onresize = null;
		window.onkeydown = function (event) {
			if (that.pressEnter) {
				return
			}
			if (event.keyCode == 13) {
				that.pressEnter = true;
				//两秒之内连续按回车无效
				var timer = setTimeout(function () {
					that.pressEnter = false;
				}, 2000)
				event.stopPropagation();
				event.preventDefault();
				event.stopImmediatePropagation();
				//if(that.box=='acount'){
				that.loginGo();

				//}else{
				// that.examLoginGo();
				//}
				clearTimeout(timer);
			}
		};

	},
	beforeDestroy() {
		this.form.name = "";
		this.form.pwd = "";
		//this.form.exam = "";
		this.pressEnter = false;
	},
	destroyed() {
		clearTimeout();
		this.$message.closeAll();
		window.onkeydown = null;
	}

}
</script>

<style scoped>
@media all and (max-width:1600px) {
	.send {
		font-size: 0.25rem !important;
	}

	.sendbox {
		top: 0.1rem !important;
		right: 0 !important;
	}

	.infocontent p {
		font-size: 12px !important;
	}

	input {
		height: 1rem !important;
		line-height: 1rem !important;
	}
}

@media all and (max-width:1366px) {
	.exnum {
		top: 0.1rem !important;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.dial>>>.el-dialog__body {
	/*曲线对话框的背景色*/
	padding: 10px;
	padding-top: 20px;
}

input::-webkit-input-placeholder {
	/* placeholder颜色  */
	color: #ccc;
	/* placeholder字体大小  */
	font-size: 0.3rem;
	/* placeholder位置  */
	text-align: left;
}

input {
	font-size: 0.35rem;
}


#bcVideo {
	width: 100%;
	height: 100%;
	object-fit: fill;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	border: none;

}

#login_area {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	/* 登录背景通过接口从后台获取 */
	/* background-image:url('https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/bgtest.jpg'); */
	/* background-image:url('https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/pcbg.jpg'); */
	/* background-image:url('https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/loginBC.jpg'); */
	/* background-image:url('https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/loginBCimg.jpg'); */
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: left top;
	/* filter:contrast(80%); */
	/* filter:blur(2px); */
	/* filter:grayscale(40%); */
	/* opacity: 0.8; */
}

.formC {
	width: 8rem;
	height: 7.6rem;
	/* border:1px solid red; */
	border-radius: 4px;
	/* margin:0 auto; */
	box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
	background-color: rgba(0, 0, 0, 0.2);
}

.pcCenter {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
}

.rightTop {
	position: fixed;
	top: 10%;
	right: 5% !important;
	z-index: 3;
	transform: translate(0, 0);
}


.rightCenter {
	position: fixed;
	top: 50%;
	right: 25% !important;
	z-index: 3;
	transform: translate(4rem, -50%);
}

#submitForm {
	position: absolute;
	z-index: 999;
	width: 100%;
	height: 100%;
	/* border:1px solid green; */
	background-color: transparent;
}

/* .bar{
		position:absolute;
		width:8.8rem;
		height:30px;
		background-color:rgba(0,0,0,0.5);
		left:-0.4rem;
		bottom:-15px;
		z-index:-1!important;

		border-radius:15px;
	}
	 */
#login_tip {
	position: relative;
	z-index: 4;
	display: flex;
	justify-content: center;
	/* justify-content: space-around; */
	margin: 0 auto;
	font-size: 0.35rem;
	color: white;
	height: 1.2rem;
	line-height: 1.2rem;
	margin-top: 0.8rem;
	width: 8.4rem;
	padding: 0 0.2rem;
	margin-left: -0.2rem;
	text-align: center;
	/* background-color: #488EfE; */
	background-color: rgba(0, 0, 0, 0.4);
	border-bottom: 1px solid white;
}

.logbtn,
.tive,
.reset {
	border: none;
	/* border-radius:0!important; */
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	text-align: center;
	font-size: 0.34rem;
	padding: 0;
	opacity: 1;
}

/* .logbtn {
		background-color: #488EfE!important;
		opacity: 0.8;
	} */

.logbtn {
	background-color: rgba(0, 0, 0, 0.4) !important;
	/* opacity: 0.8; */
}

.logbtn:hover {
	background-color: #409eee !important;
}

.triangle {
	display: inline-block;
	width: 0;
	height: 0;
	/* background-color:#0744AA; */
	border: 0.15rem solid transparent;
}

.triLeft {
	position: absolute;
	left: 0.05rem;
	top: -0.15rem;
	z-index: 1;
	border-left-color: rgba(0, 0, 0, 0.4);
	transform: rotate(45deg);
}

.triRight {
	position: absolute;
	right: 0.05rem;
	top: -0.15rem;
	z-index: 1;
	border-right-color: rgba(0, 0, 0, 0.4);
	transform: rotate(-45deg);
}

.btn:hover {
	opacity: 1;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.allinpu {
	width: 100%;
	height: 3.6rem;
	/* border:1px solid red; */
	box-sizing: border-box;
	/* border:1px solid blue; */
	padding: 0.5rem 0 0 0;
	font-size: 0.3rem;
	/*transform: translateX(-25px);*/
}

/* .allinpu_2 {
		width: 100%;
		height:3.2rem;
	    box-sizing: border-box;
	    padding:0.5rem 0 0 0;
		font-size: 0.3rem;
	} */

.inpu {
	display: inline-block;
	height: 1rem;
	width: 100%;
	color: #fff;
	border: 1px solid #ccc;
	background-color: transparent;
	/*outline: none;*/
	text-indent: 0.8rem;
	/* border:1px solid red; */
}

.item {
	/* text-align: left; */
	width: 6rem;
	height: 1rem;
	line-height: 1rem;
	margin: 0 auto;
	margin-top: 0.4rem;
	padding: 0;
	position: relative;
	/* border:1px solid red; */
}

.item:first-child {
	margin-top: 0;
}

#name {
	/* background-color:transparent; */
	background-image: url("../../static/whiteuser.png");
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem;
	background-position: 0.2rem center;
	background-color: transparent;
}

#telephone {
	/* background-color:transparent; */
	background-image: url("../../static/mobileBlue.png");
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem;
	background-position: 0.2rem center;
	background-color: transparent;
}

#pwd {
	background-color: transparent;
	background-image: url("../../static/whitelock.png");
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem;
	background-position: 0.2rem center;
}

#exam {
	background-image: url("../../static/whiteexam.png");
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem;
	background-position: 0.2rem center;
	/* transform: translateY(2px); */
}

.exnum {
	display: inline-block;
	position: absolute;
	width: 2.2rem;
	height: 1rem;
	font-size: 0.5rem;
	text-align: center;
	/* margin-left: 0.167rem; */
	background-image: url("https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/bei.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	line-height: 1rem;
	right: 0;
	top: 0;
	/* transform: translate(1.5rem, -1rem); */
}

.rember {
	height: 0.5rem;
	line-height: 0.5rem;
	width: 6rem;
	/* border:1px solid red; */
	color: white;
	/* padding:0 0.1rem; */
	box-sizing: border-box;
	margin: 0 auto;
	font-size: 0.25rem;
	margin-top: 0.4rem;
	/* transform: translateY(-1rem); */
	cursor: pointer;
}

.remberpwd {
	width: auto;
	height: 0.4rem;
	line-height: 0.4rem;
	cursor: pointer;
	vertical-align: middle;
	/* border:1px solid red; */
}

.minbox {
	width: 0.3rem;
	height: 0.3rem;
	line-height: 0.3rem;
	float: left;
	/* margin-right:0.1rem; */
	vertical-align: top;
	border: 1px solid #ccc;
	transform: translateY(2px);
}

.sendnum,
.send {
	padding: 0;
	height: 1rem;
	line-height: 1rem;
	border-radius: 0;
	font-size: 0.25rem;
	background-color: #f2f2f2;
}

.logo {
	width: 2.2rem;
	height: 1.8rem;
	margin-top: -0.1rem;
}

.middleTop {
	position: relative;
	/* padding-left:0.4rem; */
	margin-left: 150px;
	width: 100%;
	text-align: center;
	/* float:left; */
	height: 1.4rem;
}

/* 交大项目标题样式 */
.sysNameText {
	width: 100%;
	position: absolute;
	top: 0px;
	text-align: left;
	padding-left: 20px;
	font-weight: 600;
	font-size: 0.8rem;
	color: #fff;
	height: 1.6rem;
	line-height: 1.6rem;

}

/* 安图县水利项目标题样式 */
/* .sysNameText{
		width:100%;
		position:absolute;
		top:60px;
		font-weight:600;
		font-size:0.8rem;
		color:#fff;
		height:1.6rem;
		line-height: 1.6rem;

	} */



.middleBottom {
	width: 100%;
	height: 1.6rem;
	font-size: 0.35rem;
	line-height: 0.6rem;
	text-align: center;
	position: fixed;
	bottom: 0.5rem;
	left: 0;
	z-index: 2;
	/* float:right; */
	color: white;
	/* border:1px solid red; */
}

.middleBottom span {
	font-weight: 700;
	cursor: pointer;
	color: #F2B910;
}

.middleBottom span+span {
	margin-left: 0.5rem;
}

.middleBottom span:hover,
a:hover {
	cursor: pointer;
	color: deepskyblue;
}

.scanBottom {
	width: 6rem;
	height: 2.8rem;
	/* border:1px solid red; */
	position: fixed;
	bottom: 0.2rem;
	right: 0.5rem;
}

.mobileWeb,
.wxProgam {
	float: left;
	width: 50%;
	height: 2.8rem;
	/* border:1px solid blue; */
}

.wxProgam {
	float: right;
}

.scan {
	display: block;
	width: 2rem;
	margin: 0 auto;
	height: 2rem;
}

.scanText {
	width: 100%;
	text-align: center;
	height: 0.8rem;
	line-height: 0.8rem;
	color: #fff;
	font-size: 0.32rem;
}

.bgcolor {
	width: 100%;
	height: inherit;
	background-color: rgba(0, 0, 0, 0.5);
}

/* .beian{
		width:100%;
		height:0.6rem;
		text-align:center;
		color:white;
		font-size:0.3rem;
		line-height:0.6rem;
		position:fixed;
		bottom:2rem;
		z-index:1;
	}
	.beian a{
		display:inline-block;
		margin-right:0.6rem;
	}
	 */
#tele,
#acount {
	cursor: pointer;
}

.active {
	color: #F2B910;
	font-weight: 600;
	cursor: default !important;
	/* color:white; */
}

.infocontent p {
	font-size: 16px;
}

.rember span:hover {
	color: deepskyblue;
}
</style>
